<template>
  <div class="clause-detail-container">
    <div class="header">
      <div class="header-content d-flex justify-content-between align-items-center">
        <div>
          <h2>条款详情</h2>
          <div class="breadcrumb">
            <router-link to="/contracts">合同管理</router-link> >
            <router-link :to="`/contracts/${contractId}`">合同详情</router-link> >
            条款详情
          </div>
        </div>
        <button @click="goBack" class="btn btn-secondary">
          <i class="fa fa-arrow-left mr-2"></i>返回
        </button>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading" class="loading-indicator">
      <div class="spinner"></div>
      <p>加载条款详情中...</p>
    </div>

    <!-- 错误消息 -->
    <div v-if="errorMessage" class="error-message">
      <i class="fa fa-exclamation-circle mr-2"></i>{{ errorMessage }}
    </div>

    <!-- 条款详情 -->
    <div v-if="clauseDetail && !loading" class="card mt-4">
      <div class="card-header bg-light">
        <h3 class="card-title">条款信息</h3>
      </div>
      <div class="card-body">
        <div class="row">
          <div class="col-md-12">
            <div class="form-group mb-4">
              <label for="clauseContent" class="form-label">条款内容</label>
              <textarea
                  id="clauseContent"
                  class="form-control"
                  rows="8"
                  readonly
                  v-model="clauseDetail.content"
              ></textarea>
            </div>

            <div class="row">
              <div class="col-md-6">
                <div class="form-group">
                  <label class="form-label">条款类型</label>
                  <span class="form-control-plaintext">{{ clauseDetail.type === 'INITIAL' ? '创建合同时添加' : '后续追加' }}</span>
                </div>
              </div>
              <div class="col-md-6">
                <div class="form-group">
                  <label class="form-label">使用次数</label>
                  <span class="form-control-plaintext">{{ clauseDetail.usageCount || 0 }}</span>
                </div>
              </div>
            </div>

            <div class="mt-4">
              <h4 class="mb-3">审核状态</h4>

              <div class="form-group">
                <label class="form-label">法务审核状态</label>
                <div class="d-flex align-items-center">
                  <span :class="getStatusClass(clauseDetail.legalAuditStatus)">{{ getStatusText(clauseDetail.legalAuditStatus) }}</span>
                  <span v-if="clauseDetail.legalOpinion" class="ml-3 text-muted" title="{{ clauseDetail.legalOpinion }}">
                    <i class="fa fa-comment-dots"></i>
                  </span>
                </div>
              </div>

              <div class="form-group">
                <label class="form-label">财务审核状态</label>
                <div class="d-flex align-items-center">
                  <span :class="getStatusClass(clauseDetail.financeAuditStatus)">{{ getStatusText(clauseDetail.financeAuditStatus) }}</span>
                  <span v-if="clauseDetail.financeOpinion" class="ml-3 text-muted" title="{{ clauseDetail.financeOpinion }}">
                    <i class="fa fa-comment-dots"></i>
                  </span>
                </div>
              </div>

              <div class="form-group">
                <label class="form-label">客户审核状态</label>
                <div class="d-flex align-items-center">
                  <span :class="getStatusClass(clauseDetail.customerAuditStatus)">{{ getStatusText(clauseDetail.customerAuditStatus) }}</span>
                  <span v-if="clauseDetail.customerOpinion" class="ml-3 text-muted" title="{{ clauseDetail.customerOpinion }}">
                    <i class="fa fa-comment-dots"></i>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router' // 新增导入useRoute

export default {
  name: 'ClauseDetail',
  setup() {
    const route = useRoute() // 使用useRoute获取路由信息
    const contractId = route.params.contractId
    const clauseId = route.params.clauseId
    const loading = ref(true)
    const errorMessage = ref('')
    const clauseDetail = ref(null)

    // 返回上一页
    const goBack = () => {
      window.history.back()
    }

    // 获取条款详情
    const fetchClauseDetail = () => {
      loading.value = true
      errorMessage.value = ''

      if (!contractId || !clauseId) {
        errorMessage.value = '缺少必要参数'
        loading.value = false
        return
      }

      axios.get(`/auth/clauses/${clauseId}/contract/${contractId}`)
          .then(response => {
            clauseDetail.value = response.data
          })
          .catch(error => {
            console.error('获取条款详情失败', error)
            if (error.response) {
              switch (error.response.status) {
                case 404:
                  errorMessage.value = '条款不存在'
                  break;
                default:
                  errorMessage.value = '获取条款详情失败，请稍后再试'
              }
            } else {
              errorMessage.value = '网络错误，无法获取条款详情'
            }
          })
          .finally(() => {
            loading.value = false
          })
    }

    onMounted(() => {
      fetchClauseDetail()
    })

    // 获取状态文本
    const getStatusText = (status) => {
      switch (status) {
        case 'PENDING': return '待审核'
        case 'APPROVED': return '已通过'
        case 'REJECTED': return '已拒绝'
        default: return status || '未知'
      }
    }

    // 获取状态样式
    const getStatusClass = (status) => {
      switch (status) {
        case 'PENDING': return 'badge bg-warning'
        case 'APPROVED': return 'badge bg-success'
        case 'REJECTED': return 'badge bg-danger'
        default: return 'badge bg-secondary'
      }
    }

    return {
      contractId,
      clauseId,
      loading,
      errorMessage,
      clauseDetail,
      goBack,
      getStatusText,
      getStatusClass
    }
  }
}
</script>

<style scoped>
.clause-detail-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  margin-bottom: 30px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.breadcrumb {
  font-size: 0.9rem;
  color: #6c757d;
  margin-top: 10px;
}

.breadcrumb router-link {
  color: #007bff;
  text-decoration: none;
}

.breadcrumb router-link:hover {
  text-decoration: underline;
}

.loading-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  min-height: 300px;
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #007bff;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.error-message {
  color: #721c24;
  background-color: #f8d7da;
  border-left: 4px solid #f5c6cb;
  padding: 12px 15px;
  border-radius: 0 4px 4px 0;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.card {
  margin-bottom: 20px;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.card-header {
  background-color: #f8f9fa;
  padding: 15px 20px;
  border-bottom: 1px solid #e9ecef;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.card-body {
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  font-weight: 500;
  margin-bottom: 8px;
  color: #495057;
}

.form-control {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 16px;
  transition: border-color 0.3s;
}

.form-control:focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  outline: none;
}

.badge {
  font-size: 0.85rem;
  padding: 4px 8px;
  margin-right: 5px;
}

.text-muted {
  color: #6c757d !important;
}
</style>